<template>
    <div>
        <van-row type="flex" style="position:relative;" :style="{width:img.width+'vw'}">
            <!-- :alt="parkName||'车场平面图'" -->
            <img :src="`/static/img/${hx?park.imgX:park.imgY}.png` " id='abc' :style="{width:img.width+'vw',height:img.height+'vh'}"  hspace="10" align="left" border="0" @touchstart='touchstart' @touchend='touchend'>
            <a style="display:block;position:absolute;background:#f00;filter:alpha(opacity=65);opacity:0.65" href="javascript:void(0)" :style="{left:position.left+'vw',top:position.top+'vh',width:position.width+'vw',height:position.height+'vh'}"></a>
        </van-row>
        <van-tabbar style="height: 10vh">
            <van-tabbar-item style='font-size: 18px;width: 30vw'>
                <van-checkbox v-model='hx' shape='square' @click.native='chengFx()'>横向</van-checkbox>
            </van-tabbar-item>
            <van-tabbar-item style='font-size: 18px;'>
                <van-row style='width: 70vw'>
                    <van-col span="4" style='text-align: center;'>
                        <i class="fa fa-minus-square-o" aria-hidden="true" @click='minusMultiple'></i>
                    </van-col>
                    <van-col span="16">
                        <van-slider v-model="multiple" bar-height="4px" />
                    </van-col>
                    <van-col span="4" style='text-align: center;'>
                        <i class="fa fa-plus-square-o" aria-hidden="true" @click='plusMultiple'></i>
                    </van-col>
                </van-row>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import { Toast } from 'vant';
import chechang from './chechang'
export default {
    name: 'chpmt',
    data() {
        return {
            parkName: '',
            placeNo: '',           
            hx: false,
            multiple: 0,
            position: {},
            img01: {
                width: '100',
                height: '90'
            },
            img: {
                width: '100',
                height: '90',
                top: '0',
                left: '0',
                mdX: '50',
                mdY: '45'
            },
            touchS: {
                screenX: 0,
                screenY: 0
            },
            touchE: {
                screenX: 0,
                screenY: 0
            },
            park:{},
            place:{}
        };
    },
    created() {
        this.park=chechang[this.$route.params.parkNo];
        this.placeNo=this.$route.params.placeNo;
        this.parkName=this.$route.params.parkName;
        document.title = this.parkName||'车场平面图';
        if(this.placeNo&&false){
        this.place = this.park[this.$route.params.placeNo];
        this.position = $.extend(true, {}, this.place[this.hx ? 'x' : 'y']); 
        }
    },
    methods: {
        changeImg(val) {
            let scale = (val * this.img01.width) / this.img.width
            //计算中心点
            this.img.mdX = this.img.mdX * scale;
            this.img.mdY = this.img.mdY * scale;
            //计算图片宽高
            this.img.width = val * this.img01.width;
            this.img.height = val * this.img01.height;
            //计算偏离位置
            this.img.top = this.img.mdY - (this.hx ? 45 : 50);
            this.img.left = this.img.mdX - (this.hx ? 50 : 45);
            //调整滚动条位置
            let w = document.documentElement.clientWidth || document.body.clientWidth;
            let h = document.documentElement.clientHeight || document.body.clientHeight;
            let left = (this.img.left * w) / 100
            let top = (this.img.top * h) / 100
            document.documentElement.scrollLeft = left;
            window.pageXOffset = left;
            document.body.scrollLeft = left;
            document.documentElement.scrollTop = top;
            window.pageYOffset = top;
            document.body.scrollTop = top;
            // var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
             if(this.placeNo&&false){
            //计算标志点位置
            this.position.left = this.position.left * scale;
            this.position.top = this.position.top * scale;
            // //计算标志点宽高
            this.position.width = this.position.width * scale;
            this.position.height = this.position.height * scale;
            }
        },
        chengFx() {
             if(this.placeNo&&false){
            this.position = $.extend(true, {}, this.place[this.hx ? 'x' : 'y']);
        }
            this.img = { width: '100', height: '90', top: '0', left: '0', mdX: '50', mdY: '45' };
            this.multiple = 0;
        },
        touchstart(ev) {
            ev = ev || event;
            this.touchS.screenX = ev.changedTouches[0].screenX;
            this.touchS.screenY = ev.changedTouches[0].screenY;
        },
        touchend(ev) {
            ev = ev || event;
            this.touchE.screenX = ev.changedTouches[0].screenX;
            this.touchE.screenY = ev.changedTouches[0].screenY;
            //计算中心点位置
            let w = document.documentElement.clientWidth || document.body.clientWidth;
            let h = document.documentElement.clientHeight || document.body.clientHeight;
            let left = ((this.touchE.screenX - this.touchS.screenX) / w) * 100;
            let top = ((this.touchE.screenY - this.touchS.screenY) / h) * 100;
            this.img.mdX -= left;
            this.img.mdY -= top;

        },
        minusMultiple() {
            if (this.multiple > 5) {
                this.multiple -= 5;
            } else {
                this.multiple = 0;
            }
        },
        plusMultiple() {
            if (this.multiple < 95) {
                this.multiple += 5;
            } else {
                this.multiple = 100;
            }
        },
    },
    watch: {
        multiple(newVal, oldVal) {
            this.changeImg(newVal / 30 + 1);
        }
    }
};
</script>
<style>
</style>
